<template>
    <div class='confirmPay'>
        <el-dialog :title="title" visible @close="close()" width="65%" append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="formLoading">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="登录账号" prop="mobile">
                            <el-input style="width:215px;" v-model="form.mobile" placeholder="请输入登录账号（手机号）"
                                :readonly="readonly" @blur="readonly = true" @click.native="readonly = false" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="2">
                        <el-form-item label="登录密码" prop="login_pass"
                            :rules="{ required: handleShow == 'add' ? true : false, message: '请输入登录密码密码' }">
                            <el-input type="password" style="width:215px;" v-model="form.login_pass" placeholder="请输入密码" />
                            <div slot="append">添加时为空，默认为手机号；修改时为空，表示不修改密码</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="昵称" prop="nicename">
                            <el-input style="width:215px;" v-model="form.nicename" placeholder="请输入昵称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="2">
                        <el-form-item label="姓名" prop="name">
                            <el-input style="width:215px;" v-model="form.name" placeholder="请输入姓名" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="form.sex" >
                                <el-radio v-for="dict in sexList" :key="dict.dictValue" :label="Number(dict.dictValue)">
                                    {{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                            <!-- <span v-else>{{ form.sex_value }}</span> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="2">
                        <el-form-item label="出生年月" prop="birthday">
                            <el-date-picker  v-model="form.birthday" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择出生日期" :default-value="defaultime" />
                            <!-- <span v-else>{{ form.birthday }}</span> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="身高" prop="height">
                            <el-input style="width:215px;" v-model="form.height" placeholder="请输入身高">
                                <i slot="suffix"
                                    style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">CM</i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="2">
                        <el-form-item label="体重" prop="weight">
                            <el-input style="width:215px;" v-model="form.weight" placeholder="请输入体重">
                                <i slot="suffix"
                                    style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">KG</i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="自理能力" prop="self_ability">
                            <el-select v-model="form.self_ability" placeholder="请选择" clearable size="small">
                                <el-option v-for="dict in cateList" :key="dict.id" :label="dict.name" :value="dict.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="头像" prop="avatar">
                            <el-upload class="avatar-uploader" :action="$uploadUrl"
                                :show-file-list="false" :on-success="handleAvatarSuccess">
                                <img v-if="form.avatar" :src="form.avatar" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="简介" prop="content">
                            <el-input v-model="form.content" type="textarea" rows="4" placeholder="请输入简介"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import throttle from 'lodash.throttle'
import { quillEditor } from 'vue-quill-editor';
import { setUsersInfo } from "@/api/senior/user.js"
import { seX } from "@/api/dictionary"
import md5 from 'js-md5'
import { isvalidatemobile } from "@/utils/validate";
export default {
    name: 'add',
    props: {
        title: String,
        data: {
            type: Object,
            default: function () {
                return {}
            }
        }

    },
    components: {
        quillEditor
    },
    data() {
        const ismobile = (rule, value, callback) => {
            if (isvalidatemobile(value)[0]) {
                callback(new Error(isvalidatemobile(value)[1]))
            } else {
                callback()
            }
        }
        return {
            sexList: seX,
            loading: false,
            formLoading: false,
            readonly: '',
            handleShow: "",
            defaultime: new Date('1960-01-01'),
            form: {
                uid: null,
                name: null,
            },
            rules: {
                mobile: [{ required: true, message: '请输入登录账号（手机号）', trigger: 'blur' }, { validator: ismobile, trigger: 'blur' }],
                self_ability: [{ required: true, message: '请选择自理能力', trigger: 'blur' }],
            },
            cateList: [
                { id: 0, name: "活力老人" },
                { id: 1, name: "半失能" },
                { id: 2, name: "失能" },
            ],
        }
    },
    created() {
        if (this.data) {
            console.log(this.data, "表单数据")
            this.form = { ...this.form, ...this.data }
            this.form.uid = this.data.id
        }

    },
    methods: {

        close() {
            this.form = {};
            this.$emit('close');
        },
        handleAvatarSuccess(res, file) {
            this.$set(this.form, 'avatar', res.data[0].fileurl)
        },
        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    let json = this.form
                    json.login_pass = json.login_pass ? md5(json.login_pass) : null
                    setUsersInfo(json).then(res => {
                        this.msgSuccess("操作成功！");
                        this.close()
                        this.formLoading = false;
                        this.$emit('load')
                    }).catch(() => {
                        this.formLoading = false;
                    })
                }
            })
        }, 1000, { trailing: false }),
    },
}

</script>
<style scoped lang='scss'>
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px !important;
    height: 100px !important;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px !important;
    height: 100px !important;
    line-height: 100px !important;
    /* text-align: center;
    display: block !important; */
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>